<script setup>
import { ref, provide } from 'vue'
import AppSidebar from '@/components/layout/Sidebar.vue'
import AppHeader from '@/components/layout/Header.vue'
import AppFooter from '@/components/layout/Footer.vue'
import TagsView from '@/components/layout/TagsView.vue'

const isCollapse = ref(false)

const toggleSidebar = () => {
  isCollapse.value = !isCollapse.value
}

// 提供全局状态给子组件
provide('isCollapse', isCollapse)
provide('toggleSidebar', toggleSidebar)
</script>

<template>
  <div class="app-container">
    <el-config-provider>
      <el-container class="layout-container">
        <!-- 侧边栏组件 -->
        <AppSidebar />
        
        <!-- 主体内容区 -->
        <el-container class="main-container">
          <!-- 顶部导航组件 -->
          <AppHeader />
          
          <!-- 标签栏组件 -->
          <TagsView />
          
          <!-- 内容区 -->
          <el-main class="main-content">
            <router-view v-slot="{ Component }">
              <transition name="fade-transform" mode="out-in">
                <keep-alive>
                  <component :is="Component" />
                </keep-alive>
              </transition>
            </router-view>
          </el-main>
          
          <!-- 页脚组件 -->
          <AppFooter />
        </el-container>
      </el-container>
    </el-config-provider>
  </div>
</template>

<style lang="less" scoped>
.app-container {
  height: 100%;
}

.layout-container {
  height: 100%;
}

.main-container {
  flex-direction: column;
  height: 100%;
}

.main-content {
  padding: 20px;
  overflow-y: auto;
}

// 路由切换动画
.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: all 0.3s;
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style> 